<template>
  <div class="nc-tail"  id="detail-down">
    <div class="nc-fetters" ref="ncFetters">
      <div class="title">
        人物关系
      </div>
      <div class="fetters-context">
        <div class="family-box">
          <div class="type-title">
            家庭
          </div>

            <div v-for="item in data.family" :key="item.id" class="picture-box">
            <div class="picture">
              <el-image class="img" :src="item.ext1">
              </el-image>
            </div>

            <div class="text-box">
              <div class="picture-name">
                {{item.title}}
              </div>

              <div class="fetter-type">
                {{item.relateDes}}
              </div>
            </div>
          </div>
          <div class="more-arrow" @click="showTestDialog('family')">
            >>
          </div>
        </div>


        <div class="friend-box">
          <div class="type-title">
            好友
          </div>
          <div v-for="item in data.friends" :key="item.id" class="picture-box">
            <div class="picture">
              <el-image class="img" :src="item.ext1">
              </el-image>
            </div>

            <div class="text-box">
              <div class="picture-name">
                {{item.title}}
              </div>

              <div class="fetter-type">
                {{item.relateDes}}
              </div>
            </div>
          </div>

          <div class="more-arrow" @click="showTestDialog('friends')">
            >>
          </div>

        </div>
      </div>

    </div>

    <div class="nc-philosophy" ref="ncPhilosophy">
      <div class="nc-philosophy-title">
        思想表达
      </div>
      <div class="nc-philosophy-box">
        <div class="nc-philosophy-content"  @click="changeMode">
          <div class="philosophy-title"   v-if="!editMode">
            {{data?.philosophy?.upKey}}
          </div>
          <el-input class="philosophy-title"   @click.stop @change="changeMode" v-if="editMode" v-model="data.philosophy.upKey" @keyup.enter="changeMode"   >
          </el-input>

          <div class="philosophy-content"  v-if="!editMode">
            {{data?.philosophy?.upValue}}
          </div>
          <el-input class="philosophy-content"  @click.stop @change="changeMode" v-if="editMode" v-model="data.philosophy.upValue" @keyup.enter="changeMode"  >
          </el-input>
        </div>

        <div class="nc-philosophy-content" @click="changeMode" >
          <div class="philosophy-title"  v-if="!editMode">
            {{data?.philosophy?.downKey}}
          </div>
          <el-input class="philosophy-title"  @click.stop  @change="changeMode" v-if="editMode"  v-model="data.philosophy.downKey" @keyup.enter="changeMode" >
          </el-input>

          <div class="philosophy-content"  v-if="!editMode">
            {{data?.philosophy?.downValue}}
          </div>
          <el-input class="philosophy-content"  @click.stop @change="changeMode" v-if="editMode" v-model="data.philosophy.downValue" @keyup.enter="changeMode" >
          </el-input>
        </div>
      </div>
    </div>
  </div>

  <HeadPTaker ref="headPickerRef"  @closeWindow="closeHead" style="position: relative; z-index: 9999;"></HeadPTaker>

  <HeadListSelectDialog ref="headSelectRef" @openActorPicker="openActorPicker" @refreshActor="refreshData" :master-id="props.id"></HeadListSelectDialog>
</template>

<script setup lang="ts">
import HeadPTaker from "@/views/novel/character/components/HeadPTaker.vue";
import HeadListSelectDialog from "@/views/novel/character/components/down/HeadListSelectDialog.vue";
import {onMounted, reactive, ref} from "vue";
import {getCharacterFetterWithHeadListApi} from "@/api/modules/character/characterFetter";
import type {CharacterFetterForm} from "@/api/types/character/characterFetter";
import {
  createCharacterPhilosophyApi,
  getCharacterPhilosophyListApi, updateCharacterPhilosophyApi
} from "@/api/modules/character/characterPhilosophy";
import type {CharacterPhilosophyForm, CharacterPhilosophyQuery} from "@/api/types/character/characterPhilosophy";
import {ElMessage} from "element-plus";


let props = defineProps({
  id: Number,
  mode: String
})

let headSelectRef = ref();
let headPickerRef = ref();
let editMode = ref(props.mode ==='edit');

console.log('props.mode ===\'edit\'props.mode ===\'edit\'', props.mode);

let data = reactive({
   friends : [],
   family: [],
   philosophy: {} as CharacterPhilosophyForm
})

let changeMode = ()=>{
  editMode.value = !editMode.value;
  if (!editMode.value) {
    if (data.philosophy.id) {
      updateCharacterPhilosophyApi(data.philosophy).then(res => {
        let query: CharacterPhilosophyQuery = {
          belongId: props.id
        }
        getCharacterPhilosophyListApi(query).then(res2 => {
          if (res2?.data.rows.length > 0) {
            data.philosophy = res2?.data?.rows[0]
            ElMessage.success('保存成功')

          }
        })
      })
    } else {
      createCharacterPhilosophyApi(data.philosophy).then(res => {
          let query: CharacterPhilosophyQuery = {
            belongId: props.id
          }
          getCharacterPhilosophyListApi(query).then(res2 => {
            if (res2?.data.rows.length > 0) {
              data.philosophy = res2?.data?.rows[0]
              ElMessage.success('保存成功')

            }
          })
      })
    }
  }

}


const showTestDialog = (type : any) => {
  headSelectRef.value.openHeadSelectDialog(type)

  //不支持父组件控制 [子传父时关闭功能没反应]
  // visible.value = true;
  //由儿子暴露的对象进行控制
  // headPicker.value.openRef.value = true;
  // headPicker.value.openModal();
};

const openActorPicker = (masterId : any) => {
  headPickerRef.value.openActorPicker(masterId)
};

// 用于保存子组件的传递
function closeHead(str: string) {
  headPickerRef.value.closeActorPicker()
}

let showPic = ()=>{
  pc.value.showPicture("https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg")
}

onMounted(() => {
  // ncFettersPictureTest.value.style.backgroundImage = 'url(' + 希丝缇娜圆头 + ')';
  // ncFettersPictureTest.value.style.backgroundSize = '100% 100%'; // 强制缩放图片以填充元素
  //
  // ncFettersPictureTest2.value.style.backgroundImage = 'url(' + 莉艾尔 + ')';
  // ncFettersPictureTest2.value.style.backgroundSize = '100% 100%'; // 强制缩放图片以填充元素
  //
  // ncFettersPictureTest3.value.style.backgroundImage = 'url(' + 维吉尔 + ')';
  // ncFettersPictureTest3.value.style.backgroundSize = '100% 100%'; // 强制缩放图片以填充元素

})

let refreshData = ()=>{
  let queryFriends : CharacterFetterForm ={
    belongId: props.id,
    type: 'friends'
  }
  let queryFamily : CharacterFetterForm ={
    belongId: props.id,
    type: 'family'
  }

  getCharacterFetterWithHeadListApi(queryFriends).then(res1=>{
    data.friends = [];
    data.friends = res1?.data?.rows
  }).then(res=>{
    let query : CharacterPhilosophyQuery ={
      belongId: props.id
    }
    getCharacterPhilosophyListApi(query).then(res2=>{
      if (res2?.data.rows.length > 0){
        data.philosophy = res2?.data?.rows[0]
      }else {
        data.philosophy ={
          belongId: props.id,
          upKey: '标题一',
          upValue: '内容一',
          downKey:'标题二',
          downValue:'内容二'
        }
      }

      console.log(res2?.data?.rows)
      getCharacterFetterWithHeadListApi(queryFamily).then(res=>{
        data.family = [];
        data.family =res?.data?.rows

        console.log('data.familydata.familydata.family',data.family)
      })
    })
  })

}
refreshData()

</script>



<style scoped lang="scss">

:deep(.el-input__inner){
  color: black;
}

.nc-tail {
  position: relative;
  margin-top: 15px;
  //top: 50px;  /*不懂区别*/
  display: flex; /* 设置为 Flex 容器 */
  background-color: rgba(255, 255, 255, 0.1);
  min-height: 300px;

  .nc-fetters {
    width: 48%;
    border: 4px solid rgba(150, 255, 150, 0.3); /* 红色实线边框 */
    box-shadow: rgba(150, 255, 150, 0.3) 0 2px 10px 2px;

    .title {
      background-color: rgba(150, 255, 150, 0.3);
      color: black;
      font-size: 34px;
      text-align: center;
      justify-content: center;
    }

    .fetters-context {
      position: relative;
      background-color: rgba(150, 200, 255, 0.1);
      min-height: 300px;

      .family-box {
        position: relative;
        width: 100%;
        //min-height: 150px;
        height: 50%;
        display: flex;
        //background-color: rgba(255, 255, 150, 0.5);
        .type-title {
          position: relative;
          min-height: 150px;
          color: black;
          width: 10%;               /* 设置宽度 */
          writing-mode: vertical-rl; /* 使文字竖排，方向从右到左 */
          letter-spacing: 10px;       /* 增加字母间距 */
          text-align: center;        /* 居中对齐 */
          background-color: rgba(150, 255, 150, 0.5);

          display: flex;             /* 使用flex布局 */
          justify-content: center;   //不开flex不生效
          align-items: center;
        }

        //选项内通用箭头
        .more-arrow {
          width: 5%; //当前容器的5%
          color: black;
          position: relative;
          display: flex;             /* 使用flex布局 */
          justify-content: center;   //不开flex不生效
          align-items: center;
        }


        .picture-box {
          margin-top: 10px;
          position: relative;
          width: 20%;
          display: flex;
          flex-direction: column; /* 使元素垂直排列 */
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;

          .picture {
            position: relative;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
            background-color: rgba(150, 150, 150, 0.5);

            .img {
              position: relative;
              width: 100%;
              height: 100%;
              background-size: 100% 100%;
              object-fit: cover;
            }
          }

          .text-box {
            width: auto;
            .picture-name,
            .fetter-type {
              color: black;
              text-align: center;
            }
          }
        }

      }

      .friend-box {
        //border: 4px solid rgba(150, 255, 150, 0.3); /* 红色实线边框 */
        border-top:  4px solid rgba(150, 255, 150, 0.3); /* 设置上边框 */
        position: relative;
        width: 100%;
        //min-height: 150px;
        height: 50%;
        //background-color: rgba(255, 255, 200, 0.5);
        display: flex;
        .type-title {
          min-height: 150px;
          color: black;
          width: 10%; /* 设置宽度 */
          writing-mode: vertical-rl; /* 使文字竖排，方向从右到左 */
          letter-spacing: 10px; /* 增加字母间距 */
          text-align: center; /* 居中对齐 */
          background-color: rgba(200, 255, 150, 0.5);

          display: flex; /* 使用flex布局 */
          justify-content: center; //不开flex不生效
          align-items: center;
        }

        //选项内通用箭头
        .more-arrow {
          width: 5%; //当前容器的5%
          color: black;
          position: relative;
          display: flex; /* 使用flex布局 */
          justify-content: center; //不开flex不生效
          align-items: center;
        }

        .picture-box {
          margin-top: 10px;
          position: relative;
          width: 20%;
          flex-wrap: wrap; //若水平布局不足则自动换行
          display: flex;
          justify-content: center;
          align-items: center;
          //background-color: rgba(150, 150, 150, 0.5);
          .picture {
            //margin-left: 15px;
            //margin-top: 5px;
            position: relative;
            width: 70px; /* 设置图片宽度 */
            height: 70px; /* 设置图片高度，确保宽高相等 */
            border-radius: 50%; /* 设置圆角为 50% 达到圆形效果 */
            overflow: hidden; /* 确保溢出的部分被隐藏 */
            background-color: rgba(150, 150, 150, 0.5);
            top: 7px;
            .img {
              width: 100%; /* 图片宽度占满容器 */
              height: 100%; /* 图片高度占满容器 */
              object-fit: cover; /* 保持图片比例，填充容器 */
            }
          }
          .text-box{
            width: 100%;
            .picture-name,
            .fetter-type {
              color: black;
              text-align: center;
            }
          }
        }
      }
    }

  }

  .nc-philosophy {
    position: relative;
    width: 50%;
    margin-left: 7px;
    border: 4px solid rgba(150, 200, 255, 0.2); /* 红色实线边框 */
    box-shadow: rgba(150, 200, 255, 0.1) 0 2px 10px 2px;
    height: auto;
    .nc-philosophy-title{
      background-color: rgba(150, 200, 255, 0.2);
      color: black;
      font-size: 34px;
      text-align: center;
      justify-content: center;
    }

    //不加height: 50%;不生效
    .nc-philosophy-box{
      position: relative;
      display: flex;
      flex-direction: column;
      height:  calc(100% - 34px);

      .nc-philosophy-content{
        position: relative;
        color: black;
        background-color: rgba(255, 255, 255, 0.1);
        border-bottom: 4px solid rgba(150, 200, 255, 0.2);
        display: flex;
        height: 50%;
        .philosophy-title{
          background-color: rgba(150, 200, 255, 0.4);
          position: relative;
          width: 25%;
          //height: 40%;
          height: auto;
          text-align: center;
          font-size: 27px;

          display: flex;
          justify-content: center; /* 水平居中 */
          align-items: center; /* 垂直居中 */
        }
        .philosophy-content{
          width: 75%;

          display: flex;
          justify-content: center; /* 水平居中 */
          align-items: center; /* 垂直居中 */
        }
      }
    }

  }

}
</style>